import TypeCount from "@/components/TypeCount";
import Title from "../../components/title";
import "./index.less";
import WordCloud from "@/components/Echarts/WordCloud";

const R_3_box = (props: any) => {
    const data = [
        { name:'安全系数不够',
            value:5532,
        }, { name:'吃饭很贵',
            value:4532,
        }, { name:'厕所少',
            value:3532,
        }, { name:'性价比不高',
            value:2532,
        }, { name:'环境很差',
            value:1532,
        }, { name:'交通不方便',
            value:532,
        }
    ]
    const color = ["#23A4FC", "#21FFCB", "#F9CA1E"];

  return (
    <div className="mt-[13px] h-[285px]">
      <Title title={"口碑监测"} />
      <div className="box_content" style={{ padding: "10px 20px" }}>
        <div className="flex gap-[20px]">
            <div className="flex-1 h-[210px] word_bg relative pt-[10px]">
                <div className="text-center font16">差评</div>
              <WordCloud style={{height: '180px'}}
                series={[
                    {
                      type: "wordCloud",
                      width: "90%",
                      height: "90%",
                      sizeRange: [8, 20],
                      rotationRange: [0, 0],
                      gridSize: 15,
                      layoutAnimation: true,
                      textStyle: {
                        color: function () {
                          return '#FFE05F';
                        },
                      },
                      data: data,
                    },
                ]}
              />
            </div>
            <div className="flex-1 h-[210px] word_bg relative pt-[10px]">
                <div className="text-center font16">好评</div>
              <WordCloud style={{height: '180px'}}
                series={[
                  {
                    type: "wordCloud",
                    width: "90%",
                    height: "90%",
                    sizeRange: [8, 20],
                      rotationRange: [0, 0],
                      gridSize: 15,
                    layoutAnimation: true,
                    textStyle: {
                      color: function () {
                        return '#12FFFC';
                      },
                    },
                    data: data,
                  },
                ]}
              />
            </div>
        </div>
      </div>
    </div>
  );
};
export default R_3_box;
